<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <!-- CSS only -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>


    </style>
</head>

<body>
<div id="appp">
    <div class="contain">
        <div class="list-box">
            <form class="my-form">
                <input placeholder="消费名称" v-model.trim="name" type="text" class="form-control">
                <input placeholder="消费价格" v-model.number="price" type="text" class="form-control">
                <button type="button" class="btn btn-primary" @click="add">添加账单</button>
            </form>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :key=item.id>
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td :class="{red:item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                    <td><a @click="del(item.id)" href="javascript:">删除</a></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">消费总计:{{ totalPrice.toFixed(2) }}</td>
                </tr>
                </tfoot>

            </table>


        </div>

    </div>

</div>
<!--<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->

<script>
    const appp = new Vue({
        el: '#appp',
        data: {
            list: [],
            name: '',
            price: ''
        },
        computed: {
            totalPrice() {
                return this.list.reduce((sum, item) => sum + item.price, 0)
            }
        },
        // methods: {
        //     async getList() {
        //         const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
        //             params: {
        //                 creator: '小黑'
        //             }
        //         })
        //         this.list = res.data.data
        //
        //
        //     },
        //     async add() {
        //         if (!this.name) {
        //             alert('请输入消费名称')
        //             return
        //         }
        //         if (typeof this.price !== 'number') {
        //             alert('请输入正确的消费价格')
        //             return
        //         }
        //
        //         // 发送添加请求
        //         const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
        //             creator: '小黑',
        //             name: this.name,
        //             price: this.price
        //         })
        //         // 重新渲染一次
        //         this.getList()
        //
        //         this.name = ''
        //         this.price = ''
        //     }
        // }


    })
</script>

</body>

</html>